<template>
  <div>
    <el-upload
      list-type="picture-card"
      :limit="1"
      action="#"
      :on-preview="preview"
      :file-list="fileList"
      :class="{disabled: fileComputed}"
      :on-remove="removeFile"
      :on-change="changeFile"
      :before-upload="beforeUpload"
      :http-request="upload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 图片预览对话框 -->
    <el-dialog :visible.sync="showDialog" title="图片预览">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <!-- 上传进度条组件 -->
    <el-progress v-if="showProgress" :percentage="percent" style="width:180px" />
  </div>
</template>

<script>
import Cos from 'cos-js-sdk-v5'; // 引入腾讯云COS包
// 实例化COS包
const cos = new Cos({
  // 这个东西要是一个字符串
  SecretId: 'AKIDzjEVYK5FjzzjDUrUIsRmgKlyuznX5IVR',
  SecretKey: '939UYxCBuPggNo32mT2NTJugDUUEeutS',
});
export default {
  data() {
    return {
      fileList: [{ url: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2080110811,891738648&fm=26&gp=0.jpg' }],
      showDialog: false,
      dialogImageUrl: '',
      currentFileUid: null, // 记录当前上传参数的uid。
      // 控制进度条的显示和隐藏,默认不显示进度条
      showProgress: false,
      // 定义一个显示进度条百分比的数字
      percent: 0,
    };
  },
  computed: {
    fileComputed() {
    //   return this.fileList.length === 1 ? 'ture' : false;
      return this.fileList.length === 1;
    },
  },
  methods: {
    preview(file) {
    // console.log(file);
      this.dialogImageUrl = file.url;
      this.showDialog = true;
    },
    removeFile(file, fileList) {
      // console.log(file);
      // console.log(fileList);  // 这里打印出来的数组是一个空数组。
      this.fileList = this.fileList.filter(item => item.uid !== file.uid);
      // this.fileList = fileList;
    },
    changeFile(file, fileList) {
      // console.log(file);
      // console.log(fileList);
      this.fileList = fileList.map(item => item);
    },
    // 文件上传时候的检查
    beforeUpload(file) {
      // console.log(file);
      // 检查文件的类型
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png'];
      if (!types.some(item => item === file.type)) {
        // 如果上传的文件不符合types里面的文件要求，提示错误信息，并且终止上传
        this.$message.error('上传图片只能是JPG、GIF、BMP、PNG 格式！');
        return false;
      }
      // 检查文件的大小
      const maxSize = 5 * 1024 * 1024;
      if (file.size > maxSize) {
        this.$message.error('上传图片的大小不能大于5M');
        return false;
      }
      // console.log(file);
      this.currentFileUid = file.uid;
      // 在上传之前，检查通过之后，来显示上传进度条
      this.showProgress = true;
      return true; // 最后一定要return true;
    },
    // 文件上传
    upload(params) {
      // console.log(params);
      if (params.file) {
        cos.putObject({
          // 要上传的存储桶的名称
          Bucket: 'daniel888-24-1304921946',
          // 存储桶的地区
          Region: 'ap-guangzhou',
          // 文件名
          Key: params.file.name,
          // 文件
          Body: params.file,
          // 上传的模式，直接默认为标准模式
          StorageClass: 'STANDARD',
          // 注意：这里不能用普通函数，如果是普通函数里面的this指向的是window
          // onProgress: function(progressData) {
          //   console.log(progressData);
          //   console.log(11111);
          //   this.percent = progressData.percent * 100;
          //   console.log(22222);
          //   console.log(this.percent);
          // },
          // 改用箭头函数就可以使this指向当前组件的实例
          onProgress: (progressData) => {
            // console.log(progressData);
            this.percent = progressData.percent * 100;
            console.log(this.percent);
          },
        }, (err, data) => {
          // 上传至腾讯云返回的数据
          // console.log(err || data);
          if (!err && data.statusCode === 200) {
            // 此时说明文件上传成功，要获取成功的返回地址
            // fileList才能显示到组件上面
            this.fileList = this.fileList.map(item => {
              if (item.uid === this.currentFileUid) {
                return { url: 'http://' + data.Location, upload: true };
              }
              return item;
            });
            // 文件上传成功之后，隐藏进度条 并且将百分比重置为零
            setTimeout(() => {
              this.showProgress = false;
              this.percent = 0;
            }, 1000);
          }
        });
      }
    },
  },
};
</script>

<style>
/* 这里不能加scoped作为样式的私有性 ，否则样式就设置不进去*/
/* 控制图片上传按钮加号的样式 */
.disabled .el-upload--picture-card {
    display: none;
}
</style>
